<template>
   <div class="app-container">
      <div class="head-container">
        <!--搜索框-->
        <el-form inline >
          <el-form-item>
              <el-button type="success" style="margin-right:10px">导入</el-button>
              <el-button type="primary" @click="dialogFormVisible = true" style="margin-right:10px">新增</el-button>
              <el-popconfirm title="确定要删除这些记录吗？" @confirm="delHandle(null)" style="margin-left: 10px;">
                <template #reference>
                  <el-button type="danger" :disabled="multipleSelection.length === 0">批量删除</el-button>  
                </template>
              </el-popconfirm>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="table"  
        :data="data" 
        row-key="id"
        stripe
        default-expand-all
        style="width: 100%;"
        @selection-change="handleSelectionChange">
          <el-table-column type="selection" />
          <el-table-column prop="id" label="员工ID" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="height" label="身高" />
          <el-table-column prop="sex" label="性别">
            <template #default="scope">
              <el-tag v-if="scope.row.sex === 0" size="small" type="danger">女</el-tag>
              <el-tag v-else-if="scope.row.sex === 1" size="small" type="success">男</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phoneNum" label="电话号" />
          <el-table-column prop="address" label="住址" />
          <el-table-column prop="birthday" label="生日" />
          <el-table-column prop="department" label="部门" />
          <el-table-column prop="postname" label="岗位" />
          <el-table-column prop="postlevel" label="岗位等级" />
          <el-table-column prop="name" label="操作" width="300px">
          <template #default="scope">
            <el-button size="small" type="primary" @click="editHandle(scope.row.id)"  v-permission="['sys:menu:update']">编辑</el-button>
            <el-popconfirm title="确定要删除这条记录吗？" @confirm="delHandle(scope.row.id)">
              <template #reference>
                <el-button 
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
      </el-table-column>
    </el-table>
   </div>
   <!--编辑对话框-->
  <el-dialog title="员工信息" v-model="dialogFormVisible" @close="resetForm(editFormRef)" width="600px">
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef">
      <el-form-item label="姓名" prop="name" label-width="100px">
        <el-input v-model="editForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身高" prop="height" label-width="100px">
        <el-input v-model="editForm.height" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNum" label-width="100px">
        <el-input v-model="editForm.phoneNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="sex" label-width="100px">
          <el-radio-group v-model="editForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="住址" prop="address" label-width="100px">
        <el-input v-model="editForm.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生日" prop="birthday" label-width="100px">
        <el-date-picker
          v-model="editForm.birthday"
          type="date"
          placeholder="出生日期"
          :size="size"
        />
      </el-form-item>
      <el-form-item label="部门" prop="department" label-width="100px">
        <el-input v-model="editForm.department" autocomplete="off" />
      </el-form-item>
      <el-form-item label="岗位" prop="postname" label-width="100px">
        <!-- <el-input v-model="editForm.postname" autocomplete="off" /> -->
        <el-select v-model="editForm.postname" placeholder="请选择岗位" >
          <el-option v-for="item in postlDist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="岗位等级" prop="postlevel" label-width="100px">
        <!-- <el-input v-model="editForm.postlevel" autocomplete="off" /> -->
        <el-select v-model="editForm.postlevel" clearable placeholder="请选择岗位等级" >
            <el-option v-for="item in postLevelDist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <div class="dialog-footer">
        <el-button @click="resetForm(editFormRef)">取 消</el-button>
        <el-button type="primary" @click="submitEditForm(editFormRef)">确 定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { list, add, edit, del, info } from "@/api/paysys/staff"
import { ElMessage, ElTable, FormInstance, ElTree, ElMessageBox  } from 'element-plus'


// 数据字典
const postLevelDist = reactive([
  { label:'一级', value:1 },
  { label:'二级', value:2 },
  { label:'三级', value:3 },
  { label:'四级', value:4 },
  { label:'五级', value:5 },
  { label:'六级', value:6 },
  { label:'七级', value:7 },
  { label:'八级', value:8 },
  { label:'九级', value:9 },
  { label:'十级', value:10 }
])

const postlDist = reactive([
  { label:'厂长', value:'厂长' },
  { label:'部门主管', value:'部门主管' },
  { label:'车间主任', value:'车间主任' },
  { label:'工段长', value:'工段长' },
  { label:'班组长', value:'班组长' },
  { label:'普通员工', value:'普通员工' }
])

const data = ref([])

// 获取员工信息
function getStaffList() {
  list().then(res => {
    data.value = res.data
  })
}

const editFormRef = ref<FormInstance>()
const dialogFormVisible = ref(false)
const editForm = ref({} as StaffDto)
const editFormRules = reactive({
    name: [
      {required: true, message: '请输入员工名称', trigger: 'blur'}
    ],
    postname: [
      {required: true, message: '请输入岗位', trigger: 'blur'}
    ],
    postlevel: [
      {required: true, message: '请选择岗位等级', trigger: 'blur'}
    ]
})

function editHandle(id: string) {
  info(id).then(res => {
    editForm.value = res.data
    dialogFormVisible.value = true
  })
}


function submitEditForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate(async (valid, fields) =>{
    if(valid) {
      try {
        editForm.value.id? await edit(editForm.value):add(editForm.value)
        ElMessage.success(`${editForm.value.id? '编辑': '添加'}成功 `)
        getStaffList()
        dialogFormVisible.value = false
      } finally {
        dialogFormVisible.value = false
      }
    }
  })
}

function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}

const multipleSelection = ref<UserDto[]>([])
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
  console.log(val)
} 
async function delHandle(id: string) {
  const ids = []
  id ? ids.push(id) : multipleSelection.value.forEach(item => {
    ids.push(item.id)
  });
  try {
    await del(ids)
    getStaffList()
    ElMessage.success('删除成功')
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  getStaffList()
})


</script>

<style lang="scss" scoped>

</style>